<template>

  <div id="book-main" style="margin: 0;">

    <!-- 海报图片 -->
    <div class="post-main" style="transform: translate3d(0px, 0px, 0px); ">
      <section class="post-member" >
        <a href="#">
          <img src="../assets/head.png" alt>
        </a>
        <p class="show-bill-title" style="display: none;">海报标题</p>
      </section>
    </div>
    <!--  一级选择  -->

    <div v-if="selectStatus" class="box-card" >
      <div class="el-icon-s-opportunity"
           style="text-align: left;margin-left: 1vw;margin:10px;float: left;">
        请选择接受心理健康科普的人群类别！</div>
      <el-table class="el-icon-s-claim" :data="tableData" style="width: 100%;border-radius: 1rem;" stripe @row-click="toDetail" border >
        <el-table-column
            prop="date"
            label="人群类别:"
        >
        </el-table-column>
      </el-table>
    </div>

    <!--详细信息-->
    <el-card class="box-card" v-else>
      <div slot="header" class="clearfix" style="text-align: left">
<!--         <span style="text-align: left">{{detail1}}</span>-->
        <span style="text-align: left" class="el-icon-s-order">可预约的内容</span>
        <el-button @click="toBookPage()" style="float: right; padding: 3px 0" type="text" class="el-icon-phone-outline">已了解，继续预约</el-button>
      </div>
      <div style="text-align: left; margin-left: -10px;">{{detail1}}</div>
      <div v-for="o in detail2" :key="o" class="text item">
        {{ o }}
      </div>
      <div class="comeBack el-icon-refresh-left" @click="comeBack()" >返回</div>
    </el-card>
    <div style="height: 100px;" v-loading.fullscreen.lock="fullscreenLoading"></div>
<!--    <div v-else>{{ }}</div>-->
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      result: [],
      tableData: [{
        id: 1,
        date: '（1）小学生',
        detail:[
            "（1）小学生\n" ,
          "1）介绍学校适应的常见问题，帮助学生适应校园生活以及防范校园欺凌，了解求助渠道与方法。\n" ,
          "2）介绍自我意识的发展，帮助学生树立更客观的自我形象，正确的认识和评价自己。\n" ,
          "3）介绍大中小学生人际交往方面的常见问题，引导学生思考自身与他人的关系，学习人际交往技巧。\n" ,
          "4）介绍情绪的基本类型，帮助学生识别、理解、体验和表达情绪，同时正确应对负面情绪。\n" ]
      },{
        id: 2,
        date: '（2）中学生',
        detail:[
            "（2）中学生\n" ,
            "1）介绍自我意识的发展，帮助学生树立更客观的自我形象，正确的认识和评价自己。\n" ,
            "2）介绍大中小学生人际交往方面的常见问题，引导学生思考自身与他人的关系，学习人际交往技巧。\n" ,
            "3）介绍青春期个体的心理发展特点，对学生进行科学的性教育，帮助学生树立正确的性观念。\n" ,
            "4）介绍大学生和中学生常见的压力源，帮助学生应对考试焦虑，调节考试心态，缓解负面情绪的影响。\n" ,
            "5）介绍生命与死亡相关知识，增强学生们自我保护意识，引导学生们理解生命的意义及价值。\n" ,
            "6）介绍职业生涯规划相关知识，培养职业生涯规划意识，帮助学生明确自身的兴趣方向。\n"]
      },{
        id: 3,
        date: '（3）大学生',
        detail:[
            "（3）大学生\n" ,
          "1）介绍自我意识的发展，帮助学生树立更客观的自我形象，正确的认识和评价自己。\n" ,
          "2）介绍大中小学生人际交往方面的常见问题，引导学生思考自身与他人的关系，学习人际交往技巧。\n" ,
          "3）介绍青春期个体的心理发展特点，对学生进行科学的性教育，帮助学生树立正确的性观念。\n" ,
          "4）介绍生命与死亡相关知识，增强学生们自我保护意识，引导学生们理解生命的意义及价值。\n" ,
          "5）介绍职业生涯规划相关知识，培养职业生涯规划意识，帮助学生明确自身的兴趣方向。\n"]
      },  {
        id: 4,
        date: '（4）普通公众',
        detail:[ "（4）普通公众\n" ,
            "1）介绍心理健康相关的理论知识；介绍常见心理问题及调适方法；介绍心理自助及求助的途径与方法。\n" ,
            "2）介绍积极心理学相关知识，了解如何在职场、人际、亲密关系和家庭教育中获得幸福。\n" ,
            "3）介绍情绪理论知识及调节情绪的方法；介绍生活中可能存在的压力来源及其应对方法。\n" ,
            "4）介绍日常人际沟通中可能存在的问题，以及沟通的基本原则、技巧与方法。\n" ,
            "5）介绍自伤和自杀的基本理论知识，增进公众对自伤、自杀风险因素的关注、理解与应对。\n"]

      },{
        id: 5,
        date: '（5）学生家长',
        detail: ["（5）学生家长",
                "1）介绍个体的身心发展规律，帮助家长了解不同年龄阶段的脑、身体和心理发展规律。\n" ,
                "2）介绍常见的青少年心理行为问题，从心理学角度进行解读，帮助家长有效应对。\n" ,
                "3）介绍亲子沟通的困惑与期待，剖析亲子沟通的问题，练习亲子沟通技巧。\n"]
      }, {
        id: 6,
        date: '（6）单位职业人群',
        detail: ["（6）单位职业人群\n",
            "1）介绍情绪理论知识，促进职工更好地调节情绪；介绍生活中可能存在的压力来源及其应对方法。\n" ,
            "2）介绍职场人际关系处理的基本原则及处理方法，促进职场中人际之间的和谐沟通。\n" ,
            "3）介绍生涯规划，帮助认识工作对个人的意义，寻找工作的价值，促使职工找到定位和发展方向。"]
      }],
      selectStatus: true,
      detail1: null,
      detail2: [],
      typeId : null,
      fullscreenLoading: false
    }
  },
  async created() {
    this.fullscreenLoading = true
    setTimeout(() => {
    this.fullscreenLoading = false;
  }, 200);
    const { data: res } = await this.$http.get('server/type/treeData');
    console.log(res)
    // var item = {}
    var j = null,len = null;
    /*for(j = 0,len=res.length; j < len; j++) {
      var item = {}
      // console.log(res[j])
      if(res[j].pId==0) {
        item.id = res[j].id
        item.date = '（'+(j+1)+'）' + res[j].title
        this.tableData.push(item)
      }
    }*/
    this.result = this.tableData;

  },
  methods:{
    toDetail(row,event,cloumn){
      console.log(row.id);
      this.typeId = row.id
      this.selectStatus = false;
      this.detail1 = row.date;
      this.detail2.splice(0)
      for(var i=1,len= this.result[this.typeId-1].detail.length; i<len; i++){

        // if (this.result[this.typeId][i]) {
        //   console.log(this.result[i].title)
          this.detail2.push(this.result[this.typeId-1].detail[i]);
        // }
      }
      // this.detail2 = row.detail;
    },
    toBookPage(){
      this.$router.push({path:'/bookDetail',query:{typeId:this.typeId}})
    },
    comeBack(){
      this.selectStatus = true
    }
  }
}
</script>

<style scoped>
.box-card{
  width: 90vw;
  margin: 5vw;
  border-radius: 1rem;
  box-shadow:0px 0px 10px 5px rgba(30, 104, 234, 0.1);
}
.item{
  text-align: left;
  margin-top: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
.comeBack{
  float: right;
  float: bottom;
  display: inherit;
  width: 50px;height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>
